<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <button id="btnPost">发起POST请求</button>  
  <button id="btnGet">发起GET请求</button>  
<script>
   document.querySelector('#btnPost').addEventListener('click',async function(){
    //如果调用某个方法的返回值是Promise实例，则前面可以添加await!
    //await 只能用在被async“修饰”的方法中
    const {data}=await axios({
        method:'POST',
        url:'http://www.liulongbin.top:3006/api/post',
        data:{
            name:'xiaoxi',
            age:20
        }
    })
  
    console.log(data);
   })

   document.querySelector('#btnGet').addEventListener('click',async function(){
    //如果调用某个方法的返回值是Promise实例，则前面可以添加await!
    //await 只能用在被async“修饰”的方法中
    //解构赋值的时候  使用 ： 进行重命名
    //1.调用axios之后，使用async/await进行简化
    //2.使用解构赋值，从axios封装的大对象中，把data属性解构出来
    //3.把结构出来的data属性，使用 冒号 进行重命名，一般都重命名为{data: res}
    const {data: res}=await axios({
        method:'GET',
        url:'http://www.liulongbin.top:3006/api/getbooks',
        
    })
  
    console.log(res.data);
   })
   //$.ajax  $.get() $.post()
   //axios() axios.get() axios.post() axios.delete() axios.put()
</script>
</body>
</html> 